<template>
  <div class="main">
    <el-container>
      <el-aside id="elAside" width="200px">
        <Aside :is-collapse="isCollapse"></Aside>
      </el-aside>
      <el-container>
        <el-header style="padding: 0;">
          <Header></Header>
        </el-header>
        <el-main class="main-container">
          <div class="aside-close-open-icon" @click="changeAsideStatus()">
            <i class="el-icon-arrow-right" v-if="asideStatus"></i>
            <i class="el-icon-arrow-left" v-else="asideStatus"></i>
          </div>
          <router-view style="margin: auto;" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      asideStatus: false,
      isCollapse: false
    }
  },
  methods: {
    changeAsideStatus() {
      this.asideStatus = !this.asideStatus

      if (this.asideStatus) {
        document.getElementsByClassName("aside-close-open-icon")[0].style.left = "60px"
        document.getElementsByClassName("main-container")[0].style.marginLeft = "60px"
        document.getElementById("elAside").style.width = "60px"
        this.isCollapse = true
      } else {
        document.getElementsByClassName("aside-close-open-icon")[0].style.left = "200px"
        document.getElementsByClassName("main-container")[0].style.marginLeft = "200px"
        document.getElementById("elAside").style.width = "200px"
        this.isCollapse = false
      }
    }
  },

};
</script>

<style>
.el-aside {
  height: 100%;
  display: block;
  position: fixed;
  z-index: 999;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.main-container {
  margin-left: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.aside-close-open-icon {
  position: fixed;
  left: 200px;
  top: 50%;
  width: 16px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background-color: rgb(48, 65, 86);
  border-radius: 0 6px 6px 0;
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}

.aside-close-open-icon:hover {
  background-color: #FF8E2B;
  color: #fff;
}
</style>